<template>
  <div class="appServerInfo">
    <el-dialog :title="dialogAppServer.title" v-model="obj.visible" @update:model-value="dialogAppServerChange"
      :style="{ right: '20px', top: '50%', transform: 'translateY(-50%)', position: 'fixed', margin: '0' }"
      width="600px">
      <el-form ref="miniProgramDomainFormRef" :model="form" :rules="rules" label-width="180px">
        <el-row :gutter="24" class="mb8">
          <el-col :span="18">
            <el-form-item label="request 合法域名" prop="requestDomain">
              <el-input v-model="form.requestDomain" placeholder="请输入内容" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="socket 合法域名" prop="wsrequestDomain">
              <el-input v-model="form.wsrequestDomain" placeholder="例：https://www.qq.cpm，多个使用逗号隔开"
                :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="uploadFile 合法域名" prop="uploadDomain">
              <el-input v-model="form.uploadDomain" placeholder="例：https://www.qq.cpm，多个使用逗号隔开" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="downloadFile 合法域名" prop="downloadDomain">
              <el-input v-model="form.downloadDomain" placeholder="例：https://www.qq.cpm，多个使用逗号隔开"
                :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="udp 合法域名" prop="udpDomain">
              <el-input v-model="form.udpDomain" placeholder="例：https://www.qq.cpm，多个使用逗号隔开" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="tcp 合法域名" prop="tcpDomain">
              <el-input v-model="form.tcpDomain" placeholder="例：https://www.qq.cpm，多个使用逗号隔开" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AppServerInfo" lang="ts">
import { listMiniProgramDomain, getMiniProgramDomain, delMiniProgramDomain, addMiniProgramDomain, updateMiniProgramDomain } from '@/api/platform/miniProgramDomain';
import { MiniProgramDomainVO, MiniProgramDomainQuery, MiniProgramDomainForm } from '@/api/platform/miniProgramDomain/types';
const obj = defineProps({
  ymId: {
    type: Number,
    default: undefined
  },
  baseId: {
    type: Number,
    default: undefined
  },
  visible: {
    type: Boolean,
    default: false
  }
});
const _id = obj.ymId
const _baseId = obj.baseId
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const miniProgramDomainFormRef = ref<ElFormInstance>();
const disabled = ref(false);
const buttonLoading = ref(false);

const dialogAppServer = reactive<DialogOption>({
  visible: false,
  title: '服务器域名修改'
});

const initFormData: MiniProgramDomainForm = {
  id: _id,
  baseId: _baseId,
  requestDomain: undefined,
  wsrequestDomain: undefined,
  uploadDomain: undefined,
  downloadDomain: undefined,
  udpDomain: undefined,
  tcpDomain: undefined,
  domainType: "1",
}
const data = reactive<PageData<MiniProgramDomainForm, MiniProgramDomainQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: _id,
    baseId: _baseId,
    requestDomain: undefined,
    wsrequestDomain: undefined,
    uploadDomain: undefined,
    downloadDomain: undefined,
    udpDomain: undefined,
    tcpDomain: undefined,
    params: {
    }
  },
  rules: {
    requestDomain: [
      { required: true, message: "request 合法域名不能为空", trigger: "blur" }
    ],
    uploadDomain: [
      { required: true, message: "uploadFile 合法域名不能为空", trigger: "change" }
    ],
    downloadDomain: [
      { required: true, message: "downloadFile 合法域名不能为空", trigger: "blur" }
    ],
    
  }
});
const { queryParams, form, rules } = toRefs(data);

const emit = defineEmits(['update:visible']);
const dialogAppServerChange = (visible: boolean) => {
  emit('update:visible', visible);
}

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  miniProgramDomainFormRef.value?.resetFields();
}

/** 详情按钮操作 */
const getInfo = async () => {
  if (_id != undefined) {
    const res = await getMiniProgramDomain(_id);
    form.value = res.data;
    dialogAppServer.visible = true;
    dialogAppServer.title = '服务器域名修改'
  } else {
    dialogAppServer.visible = true;
  }
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialogAppServerChange(false)
}

/** 提交按钮 */
const submitForm = () => {
  miniProgramDomainFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      form.value.domainType = "1";
      if (form.value.id) {
        await updateMiniProgramDomain(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addMiniProgramDomain(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialogAppServer.visible = false;
    }
  });
}

onMounted(() => {
  getInfo();
});

</script>

<style lang="scss"></style>
